<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>

    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .myContainer {
        margin-right: 10px;
    }

    .searchGroupBox {
        margin-left: 10px;
        margin-right: 10px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .flex-space-between {
        display: flex;
        justify-content: space-between;
        /*  交叉轴居中  */
        align-items: center;
    }

    .marginTop {
        margin-top: 10px;
    }

    .dataTable {
        min-height: 400px;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*穿梭框外框高宽度*/
    .el-transfer-panel {
        width: 300px;
        height: 400px;
    }

    /*穿梭框内部展示列表的高宽度*/
    .el-transfer-panel__list {
        width: 300px;
        height: 361px;
    }

</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">试题管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>试题管理</span></li>
                        <li class="breadcrumb-item active"><span>新建试题</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">
            <div class="myContainer" id="addQuestionApp">
                <!-- 试卷信息 start -->
                <div class="searchGroupBox well flex-space-between">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="题目内容" prop="name">
                            <el-input v-model="ruleForm.name" style="min-width: 440px"></el-input>
                        </el-form-item>
                        <el-form-item label="题目类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="请选择题目类型" style="min-width: 440px">
                                <el-option label="单选题" value="1"></el-option>
                                <el-option label="多选题" value="2"></el-option>
                                <el-option label="判断题" value="3"></el-option>
                                <el-option label="填空题" value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- 题目选项 start -->
                        <!-- 单选题 -->
                        <el-form-item label="答案选项" v-show="ruleForm.type == 1">
                            <div v-for="item in singleChoose"
                                 style="display: flex;margin-right: 4px;margin-top: 2px;margin-bottom: 2px;">
                                <span style="margin-left: 2px;margin-right: 2px;">{{item.option}}：</span>
                                <el-input v-model="item.value">
                                </el-input>
                            </div>
                        </el-form-item>

                        <!-- 多选题 -->
                        <el-form-item label="答案选项" v-show="ruleForm.type == 2">
                            <div v-for="item in multiChoose"
                                 style="display: flex;margin-right: 4px;margin-top: 2px;margin-bottom: 2px;">
                                <span style="margin-left: 2px;margin-right: 2px;">{{item.option}}：</span>
                                <el-input v-model="item.value">
                                </el-input>
                            </div>
                        </el-form-item>

                        <!-- 题目选项 end -->

                        <!-- 正确答案 start -->
                        <!-- 单选题 -->
                        <el-form-item label="正确答案" prop="correctAnswer" v-if="ruleForm.type == 1">
                            <el-radio-group v-model="ruleForm.correctAnswer" size="medium">
                                <el-radio border v-for="item in singleChoose"
                                          :label="item.option + '.' + item.value"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 多选题 -->
                        <el-form-item label="正确答案" prop="correctAnswer" v-if="ruleForm.type == 2">
                            <el-checkbox-group v-model="correctAnswerOfMultiChoose">
                                <el-checkbox v-for="item in multiChoose"
                                             :label="item.option + '.' + item.value"
                                             :key="item.option">
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                        <!-- 判断题 -->
                        <el-form-item label="正确答案" prop="correctAnswer" v-if="ruleForm.type == 3">
                            <el-radio-group v-model="ruleForm.correctAnswer" size="medium">
                                <el-radio border label="对"></el-radio>
                                <el-radio border label="错"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 填空题 -->
                        <el-form-item label="正确答案" prop="correctAnswer" v-if="ruleForm.type == 4">
                            <el-input v-model="ruleForm.correctAnswer"></el-input>
                        </el-form-item>
                        <!-- 正确答案 end -->

                        <el-form-item label="分值" prop="score">
                            <el-input v-model="ruleForm.score" @input="handlerInputScore"></el-input>
                        </el-form-item>

                        <el-form-item label="分析" prop="analysis">
                            <el-input type="textarea" v-model="ruleForm.analysis" :rows="6"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 试卷信息 end -->

                <!-- 分页 start -->
                <div class="searchGroupBox well marginTop flex_center">
                    <div>
                        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button @click="goBack">返回试题列表</el-button>
                    </div>
                </div>
                <!-- 分页 end -->
            </div>
            <div style="height: 20px;"></div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>

<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>

<script>
    <%@ include file="../../utils/menu.jsp"%>
    <%@ include file="../../static/setMenu.js"%>
    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/getRoleButtons.js"%>
    <%@ include file="../../static/crossBtnControl.js"%>

    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
</script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    const addQuestionApp = new Vue({
        el: "#addQuestionApp",
        data() {
            return {
                ruleForm: {
                    // 问题id
                    id: '',
                    // 题目
                    name: '',
                    // 题目类型：1-单选题;2-多选题;3-判断题;4-填空题
                    type: '',
                    // 分值
                    score: '',
                    // 答案
                    answer: '',
                    // 正确答案
                    correctAnswer: '',
                    // 分析
                    analysis: '',
                },
                correctAnswerOfMultiChoose: [],
                rules: {
                    name: [
                        {required: true, message: '请输入题目', trigger: 'blur'}
                    ],
                    correctAnswer: [
                        {required: true, message: '请输入正确答案', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择题目类型', trigger: 'change'}
                    ],
                    score: [
                        {required: true, message: '请输入题目分值', trigger: 'blur'}
                    ],
                },
                // 单选题选项内容
                singleChoose: [
                    {
                        value: '选项A',
                        option: 'A',
                    },
                    {
                        value: '选项B',
                        option: 'B',
                    },
                    {
                        value: '选项C',
                        option: 'C',
                    },
                    {
                        value: '选项D',
                        option: 'D',
                    },
                ],
                // 多选题选项内容
                multiChoose: [
                    {
                        value: '选项A',
                        option: 'A',
                    },
                    {
                        value: '选项B',
                        option: 'B',
                    },
                    {
                        value: '选项C',
                        option: 'C',
                    },
                    {
                        value: '选项D',
                        option: 'D',
                    },
                ],
            };
        },
        methods: {
            submitForm(formName) {
                const _this = this;
                if (this.ruleForm.type == 1) {
                    this.ruleForm.answer = JSON.stringify(this.singleChoose);
                    _this.ruleForm.correctAnswer = _this.ruleForm.correctAnswer.substr(0, 1)
                } else if (this.ruleForm.type == 2) {
                    if (this.correctAnswerOfMultiChoose.length <= 1) {
                        this.$message({
                            message: '请选择正确答案',
                            type: 'warning'
                        });
                        return false;
                    } else {
                        let temp = [];
                        this.correctAnswerOfMultiChoose.forEach(function (item, index) {
                            console.debug(item);
                            temp.push(item.substr(0, 1));
                        }.bind(this));
                        temp.sort();
                        this.ruleForm.correctAnswer = temp.join(',');
                    }
                    this.ruleForm.answer = JSON.stringify(this.multiChoose);
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 组装问题
                        const question = {
                            id: this.ruleForm.id,
                            name: _this.ruleForm.name,
                            // 题目类型：1-单选题;2-多选题;3-判断题;4-填空题
                            type: _this.ruleForm.type,
                            // 分值
                            score: _this.ruleForm.score,
                            answer: _this.ruleForm.answer,
                            // 正确答案
                            correctAnswer: _this.ruleForm.correctAnswer,
                            // 分析
                            analysis: _this.ruleForm.analysis
                        }
                        console.debug(question);
                        axios({
                            url: '/jspmk28g8/question/modify',
                            method: 'post',
                            data: question,
                            headers: {
                                'Content-Type': 'application/json',
                                'token': window.sessionStorage.getItem('token')
                            }
                        }).then(function (res) {
                            const {code, msg} = res.data;
                            if (code === 200) {
                                _this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                // 延时返回上一页
                                setTimeout(function () {
                                    _this.goBack()
                                }, 1000);
                            } else {
                                _this.$message({
                                    message: msg,
                                    type: 'warning'
                                });
                            }
                        }).catch(function (err) {
                            console.debug(err);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack: function () {
                window.location.href = 'list.jsp'
            },
            handlerInputScore(value) {
                console.debug("分值：" + value)
                this.ruleForm.score = this.ruleForm.score.replace(/[^\d]/g, '')
            },
        },
        mounted() {
            // 获取问题id
            const editQuestionId = window.sessionStorage.getItem('editQuestionId')
            if (editQuestionId) {
                this.ruleForm.id = parseInt(editQuestionId)
            } else {
                // 未获取到试卷id，跳转到列表页
                this.$confirm('获取修改数据的id失败，将返回列表', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,
                    closeOnPressEscape: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    window.location.href = "${pageContext.request.contextPath}/jsp/modules/examquestion/list.jsp";
                })
                return false;
            }
            const _this = this;
            // 获取试题信息
            axios({
                url: '${pageContext.request.contextPath}/question/getById',
                params: {
                    id: _this.ruleForm.id,
                },
                headers: {
                    'Content-Type': 'application/json',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (res) {
                console.debug(res)
                const {code, data} = res.data;
                if (code == 200) {
                    _this.ruleForm.id = data.id
                    _this.ruleForm.name = data.name
                    _this.ruleForm.type = data.type + ''
                    _this.ruleForm.score = data.score
                    _this.ruleForm.answer = data.answer
                    _this.ruleForm.correctAnswer = data.correctAnswer
                    _this.ruleForm.analysis = data.analysis
                    if (data.type == 1) {
                        _this.singleChoose = []
                        _this.singleChoose = JSON.parse(data.answer)
                    } else if (data.type == 2) {
                        _this.multiChoose = []
                        _this.multiChoose = JSON.parse(data.answer)
                    }
                } else {
                    // 未获取到试卷id，跳转到列表页
                    this.$confirm('获取修改数据的id失败，将返回列表', '提示', {
                        confirmButtonText: '确定',
                        showCancelButton: false,
                        showClose: false,
                        closeOnPressEscape: false,
                        closeOnClickModal: false,
                        type: 'warning'
                    }).then(() => {
                        window.location.href = "${pageContext.request.contextPath}/jsp/modules/examquestion/list.jsp";
                    })
                    return false;
                }
            }).catch(function (err) {
                console.debug(err);
                // 未获取到试卷id，跳转到列表页
                this.$confirm('获取修改数据的id失败，将返回列表', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,
                    closeOnPressEscape: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    window.location.href = "${pageContext.request.contextPath}/jsp/modules/examquestion/list.jsp";
                })
                return false;
            });
        }
    });
</script>
</body>

</html>